Web Serial API: Brobyggeren mellom nettlesere og maskinvareenheter

Web Serial API er en revolusjonerende teknologi som gir webutviklere mulighet til å interagere direkte med serielle enheter fra en nettleser. Dette åpner for et bredt spekter av muligheter, fra å kontrollere roboter og innebygde systemer til å samle sensordata og bygge interaktive fysiske opplevelser. Denne guiden gir en omfattende oversikt over Web Serial API, dens funksjonalitet og hvordan du implementerer den i dine prosjekter, og retter seg mot et globalt publikum av utviklere og entusiaster.

Hva er Web Serial API?

Web Serial API lar webapplikasjoner kommunisere med serielle enheter, som mikrokontrollere, Arduino-kort, 3D-printere og annen maskinvare, direkte fra nettleseren. Dette oppnås via den serielle porten, et standard grensesnitt for datakommunikasjon. I motsetning til tidligere metoder som krevde plugins eller native applikasjoner, gir Web Serial API en sikker og standardisert måte å interagere med maskinvare på.

Nøkkelfunksjoner:

• Sikker tilgang: Krever eksplisitt brukertillatelse for å få tilgang til en spesifikk enhet, noe som forbedrer sikkerheten.
• Kryssplattformkompatibilitet: Fungerer på tvers av ulike operativsystemer, inkludert Windows, macOS, Linux og ChromeOS, og gir en konsistent opplevelse.
• Standardisert API: Tilbyr et konsistent og brukervennlig JavaScript API for interaksjon med serielle enheter.
• Datastrømming: Støtter datastrømming i sanntid, noe som muliggjør livedatavisualisering og interaksjon.
• Toveiskommunikasjon: Tilrettelegger for sending og mottak av data mellom webapplikasjonen og maskinvareenheten.

Fordeler med å bruke Web Serial API

Web Serial API tilbyr en rekke fordeler for utviklere, inkludert:

• Forenklet utvikling: Eliminerer behovet for plattformspesifikke plugins eller native applikasjonsutvikling, noe som forenkler utviklingsprosessen.
• Forbedret tilgjengelighet: Gjør maskinvareinteraksjon mer tilgjengelig for et bredere publikum, ettersom brukere kan kontrollere enheter direkte fra nettleserne sine.
• Forbedret brukeropplevelse: Gir en mer sømløs og intuitiv brukeropplevelse, ettersom brukere kan interagere med maskinvare uten å installere ekstra programvare.
• Økt interaktivitet: Muliggjør opprettelse av svært interaktive webapplikasjoner som integreres med den fysiske verden.
• Global rekkevidde: Webapplikasjoner bygget med Web Serial API kan nås fra hvilken som helst enhet med en nettleser og internettforbindelse, noe som fremmer verdensomspennende samarbeid og innovasjon.

Bruksområder og eksempler

Web Serial API kan brukes i en lang rekke prosjekter og applikasjoner, inkludert:

• Tingenes Internett (IoT): Koble webapplikasjoner til sensordata fra mikrokontrollere, opprette dashbord for miljøovervåking, smarthjemkontroll og industriell automatisering. Tenk på applikasjoner på forskjellige steder, for eksempel overvåking av temperatur i et drivhus i Nederland eller sporing av jordfuktighet på en gård i Kenya.
• Robotikk og automatisering: Kontrollere roboter, droner og andre automatiserte systemer direkte fra et webgrensesnitt. Dette kan brukes til pedagogiske formål (f.eks. robotprogrammering på en skole i Japan) eller industriell automatisering (f.eks. kontroll av en produksjonslinje i Tyskland).
• 3D-printkontroll: Administrere og overvåke 3D-printere direkte fra en nettleser, slik at brukere kan laste opp og kontrollere utskriftsjobber eksternt. Dette er spesielt nyttig i distribuert produksjon og "makerspaces", som sett i land som USA eller India.
• Datainnsamling og visualisering: Samle inn data fra sensorer (f.eks. temperatur, trykk, lys) og vise dem i sanntid på et web-dashbord. Dette har bred anvendelighet, fra vitenskapelig forskning i Canada til landbruksovervåking i Brasil.
• Utdanningsprosjekter: Undervise studenter om elektronikk, programmering og maskinvareinteraksjon. Enkelheten til Web Serial API gjør den tilgjengelig for studenter i alle aldre og bakgrunner globalt.
• Interaktive installasjoner: Opprette engasjerende og interaktive installasjoner som reagerer på brukerinput eller sensordata. Eksempler inkluderer kunstinstallasjoner eller museumsutstillinger, som utnytter fysisk databehandling i land som Australia.

Eksempel: Kontroll av et Arduino-kort

La oss lage et enkelt eksempel for å kontrollere en LED-lampe koblet til et Arduino-kort. Vi vil bruke JavaScript til å sende kommandoer til Arduino, og Arduino vil svare med å slå LED-lampen på eller av.

1. Arduino-kode (Arduino IDE):

            const int ledPin = 13;

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();
    if (command == '1') {
      digitalWrite(ledPin, HIGH);
      Serial.println("LED ON");
    } else if (command == '0') {
      digitalWrite(ledPin, LOW);
      Serial.println("LED OFF");
    }
  }
}
            

              
                Copy
              
            
          

Denne Arduino-koden:

• Setter opp LED-pinnen som utgang.
• Initialiserer seriell kommunikasjon med 9600 baud.
• Sjekker kontinuerlig for innkommende serielle data.
• Hvis data mottas, leser den tegnet.
• Hvis tegnet er '1', slår den på LED-lampen.
• Hvis tegnet er '0', slår den av LED-lampen.
• Sender en bekreftelsesmelding tilbake til den serielle porten.

2. HTML og JavaScript (nettleser):

            <!DOCTYPE html>
<html>
<head>
  <title>Web Serial LED Control</title>
</head>
<body>
  <button id="connectButton">Connect to Arduino</button>
  <button id="onButton" disabled>Turn LED On</button>
  <button id="offButton" disabled>Turn LED Off</button>
  <p id="status">Disconnected</p>

  <script>
    const connectButton = document.getElementById('connectButton');
    const onButton = document.getElementById('onButton');
    const offButton = document.getElementById('offButton');
    const status = document.getElementById('status');
    let port;
    let writer;

    async function connect() {
      try {
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        writer = port.writable.getWriter();
        status.textContent = 'Connected';
        connectButton.disabled = true;
        onButton.disabled = false;
        offButton.disabled = false;
      } catch (error) {
        status.textContent = 'Error: ' + error.message;
      }
    }

    async function sendCommand(command) {
      try {
        const data = new TextEncoder().encode(command);
        await writer.write(data);
      } catch (error) {
        status.textContent = 'Error sending command: ' + error.message;
      }
    }

    async function turnOn() {
      await sendCommand('1');
    }

    async function turnOff() {
      await sendCommand('0');
    }

    connectButton.addEventListener('click', connect);
    onButton.addEventListener('click', turnOn);
    offButton.addEventListener('click', turnOff);
  </script>
</body>
</html>
            

              
                Copy
              
            
          

Forklaring av JavaScript-koden:

• Koble til-knapp: Når den klikkes, ber den om tilgang til en seriell port og forsøker å åpne den.
• Slå LED på/av-knapper: Sender kommandoen "1" for å slå på LED-lampen og "0" for å slå av LED-lampen.
• Tilkoblingsstatus: Viser gjeldende tilkoblingsstatus.
• `navigator.serial.requestPort()`: Ber brukeren om å velge en seriell port.
• `port.open()`: Åpner den valgte serielle porten. Parameteren `baudRate` er satt til å matche Arduino-koden (9600).
• `port.writable.getWriter()`: Oppretter en skriver for å sende data til den serielle porten.
• `writer.write(data)`: Skriver data (kommandoen) til den serielle porten.
• Feilhåndtering: Inkluderer feilhåndtering for å gi tilbakemelding til brukeren.

Slik kjører du eksempelet:

1. Koble til Arduino: Koble Arduino-kortet til datamaskinen din via USB.
2. Last opp Arduino-koden: Åpne Arduino IDE og last opp den medfølgende koden til Arduino-kortet ditt.
3. Opprett HTML-filen: Lagre HTML-koden som en HTML-fil (f.eks. `index.html`).
4. Åpne HTML-filen i en nettleser: Åpne `index.l` filen i en nettleser som støtter Web Serial API (f.eks. Chrome, Edge og noen versjoner av Opera).
5. Koble til og kontroller: Klikk på "Koble til Arduino"-knappen. Nettleseren din vil be deg om å velge en seriell port. Velg Arduino. Klikk deretter på "Slå LED på" og "Slå LED av"-knappene for å kontrollere LED-lampen.

Komme i gang med Web Serial API

For å begynne å bruke Web Serial API, trenger du følgende:

• En nettleser som støtter Web Serial API: For tiden støttet av Chrome, Edge og noen versjoner av Opera. Sjekk nettleserkompatibilitet på ressurser som Can I Use.
• En maskinvareenhet: For eksempel en Arduino, Raspberry Pi, eller hvilken som helst enhet som kommuniserer over en seriell port.
• Grunnleggende kunnskap om HTML, CSS og JavaScript: Kjennskap til disse webteknologiene er viktig.

Trinn-for-trinn-guide:

1. Be om tilgang til seriell port: Bruk `navigator.serial.requestPort()` for å be brukeren om å velge en seriell port. Denne funksjonen returnerer en Promise som løses til et `SerialPort`-objekt. Merk: brukerinteraksjon (et knappetrykk) er vanligvis nødvendig for å utløse `requestPort()`.
2. Åpne den serielle porten: Kall `port.open()`-metoden, og send inn et konfigurasjonsobjekt som spesifiserer baudrate og andre innstillinger for seriell port (f.eks. dataBits, stopBits, parity). Baudraten må matche hastigheten som brukes av maskinvareenheten din.
3. Få lesbare og skrivbare strømmer: Bruk `port.readable` og `port.writable` egenskapene for å få de lesbare og skrivbare strømmene. Disse strømmene brukes til å sende og motta data.
4. Opprett en skriver: Bruk `port.writable.getWriter()`-metoden for å opprette et `writer`-objekt, som du vil bruke til å sende data til enheten.
5. Opprett en leser: Bruk `port.readable.getReader()`-metoden for å opprette et `reader`-objekt, som du vil bruke til å motta data fra enheten.
6. Skriv data til enheten: Bruk `writer.write(data)` for å sende data til den serielle porten. `data` bør være en `ArrayBuffer` eller en `Uint8Array`. Du kan bruke `TextEncoder` til å konvertere en streng til en `Uint8Array`.
7. Les data fra enheten: Bruk `reader.read()` for å lese data fra den serielle porten. Denne metoden returnerer en Promise som løses til et objekt som inneholder dataene og en boolsk verdi som indikerer om strømmen er lukket.
8. Lukk den serielle porten: Når du er ferdig, kall `writer.close()` og `reader.cancel()` for å lukke strømmene, og deretter `port.close()` for å lukke den serielle porten. Inkluder alltid feilhåndtering for å håndtere potensielle problemer med seriell kommunikasjon.

Kodeeksempler og beste praksis

Her er flere kodebiter og beste praksis for arbeid med Web Serial API:

1. Be om en seriell port:

            async function requestSerialPort() {
  try {
    const port = await navigator.serial.requestPort();
    return port;
  } catch (error) {
    console.error('Error requesting port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

2. Åpne og konfigurere den serielle porten:

            async function openSerialPort(port) {
  try {
    await port.open({
      baudRate: 115200, // Adjust to match your device
      dataBits: 8,
      stopBits: 1,
      parity: 'none',
    });
    return port;
  } catch (error) {
    console.error('Error opening port:', error);
    return null;
  }
}
            

              
                Copy
              
            
          

3. Skrive data til den serielle porten (streng):

            async function writeToSerialPort(port, data) {
  const encoder = new TextEncoder();
  const writer = port.writable.getWriter();
  try {
    await writer.write(encoder.encode(data));
  } catch (error) {
    console.error('Error writing to port:', error);
  } finally {
    writer.releaseLock();
  }
}
            

              
                Copy
              
            
          

4. Lese data fra den serielle porten:

            async function readFromSerialPort(port, callback) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // Stream closed
        break;
      }
      if (value) {
        const decoder = new TextDecoder();
        const decodedValue = decoder.decode(value);
        callback(decodedValue);
      }
    }
  } catch (error) {
    console.error('Error reading from port:', error);
  } finally {
    reader.releaseLock();
  }
}
            

              
                Copy
              
            
          

5. Lukke den serielle porten:

            async function closeSerialPort(port) {
  if (port) {
    try {
      await port.close();
    } catch (error) {
      console.error('Error closing port:', error);
    }
  }
}
            

              
                Copy
              
            
          

Beste praksis:**

            async function startStreaming(port, dataCallback) {
  const reader = port.readable.getReader();
  let decoder = new TextDecoder();
  let buffer = '';

  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break; // Stream closed
      }
      if (value) {
        buffer += decoder.decode(value);
        let newlineIndex = buffer.indexOf('\n'); // Or '\r' or similar terminator
        while (newlineIndex > -1) {
          const line = buffer.substring(0, newlineIndex);
          dataCallback(line); // Process the received data line
          buffer = buffer.substring(newlineIndex + 1);
          newlineIndex = buffer.indexOf('\n');
        }
      }
    }
  } catch (error) {
    console.error('Error during streaming:', error);
  } finally {
    reader.releaseLock();
  }
}

            

              
                Copy
              
            
          

            const port = await navigator.serial.requestPort({
  filters: [
    { usbVendorId: 0x2341, // Arduino Vendor ID
      usbProductId: 0x0043 }, // Arduino Uno Product ID
  ],
});
            

              
                Copy